<!--
 * @Description: 缺陷部位新增或编辑
 * @Author: Liu Zhiwang
 * @Date: 2021-04-13 17:05:40
 * @LastEditTime: 2021-04-22 15:37:59
 * @LastEditors: Liu Zhiwang
-->
<template>
  <div>
    <base-dialog
      class="dialog_box"
      :visible.sync="dialog.visible"
      :title="dialog.title"
      :loading="dialog.loading"
      :disabled="dialog.disabled"
      @updateData="updateData"
      @open="beforeOpenDialog">
      <el-form
        ref="dataForm"
        :model="dialog.form"
        :rules="dialog.rules"
        :disabled="dialog.disabled"
        label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="部位名称" prop="positionName">
              <el-input v-model="dialog.form.positionName" clearable :maxlength="20" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="部位编号" prop="positionCode">
              <el-input v-model="dialog.form.positionCode" clearable :maxlength="20" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="上级部位" prop="parentName">
              <select-table
                v-model="dialog.form.parentName"
                :disabled="dialog.type=='edit'?true:false"
                :filter-form="selectTableModel.filterForm"
                :filter-data="selectTableModel.filterData"
                :default-data="dialog.dataList.positionList"
                :columns="selectTableModel.columns"
                :total="selectTableModel.total"
                :filter-fn="selectTableModel.filterFn"
                @current-change="changeTableItem"
                @clear="dialog.form.parentName='';dialog.form.parentId=0">
                <template slot="siteName" slot-scope="{row}">
                  {{ row.siteAttr ? row.siteAttr.siteName : '' }}
                </template>
              </select-table>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="部位描述" prop="description">
              <el-input v-model="dialog.form.description" type="textarea" :autosize="{ minRows: 4}" maxlength="500" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </base-dialog>
  </div>
</template>
<script>
import { getListPage } from '@/api/jcwwtk/position'
export default {
  props: {
    dialog: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      selectTableModel: {
        filterForm: {
          page: 1,
          size: 10,
          deptCode: ''
        },
        filterData: {
          keyWord: {
            key: 'keyWord',
            type: 'input',
            placeholder: '名称/编号'
          }
        },
        columns: [
          { property: 'positionName', label: '部位名称' },
          { property: 'positionCode', label: '部位编号' },
          { property: 'parentName', label: '上级部位' }
        ],
        total: 0,
        filterFn: getListPage
      }
    }
  },
  watch: {
    'dialog.visible'() {
      if (this.dialog.visible) {
        this.selectTableModel.filterForm.deptCode = this.dialog.form.deptCode
        this.selectTableModel.filterForm.page = 1
        this.getListPage()
      }
    }
  },
  methods: {
    beforeOpenDialog() {
      this.$nextTick(() => {
        this.$refs.dataForm.clearValidate()
      })
    },
    getListPage() {
      getListPage(this.selectTableModel.filterForm)
        .then((response) => {
          this.dialog.dataList.positionList = response.data.records
          this.selectTableModel.total = response.data.total
        })
        .catch((_) => {
          this.listLoading = false
        })
    },
    changeTableItem(row) {
      var tempData = this.dialog.form
      tempData.parentId = row.id
      tempData.parentName = row.positionName
      this.dialog.form = JSON.parse(JSON.stringify(tempData))
    },
    updateData() {
      this.$refs.dataForm.validate((valid) => {
        if (valid) {
          this.dialog.loading = true
          this.$emit('updateData', this.dialog.form)
        }
      })
    }
  }
}
</script>
